<template>
	<view class="container">
		<uni-card class="bind-card">
			<uni-row class="demo-uni-row" :gutter="8" style="margin-top: 20rpx; padding-bottom: 20rpx;">
				<uni-col :span="4">
					<view>
						<image style="height: 110.32rpx;" src="https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132" mode="aspectFill"></image>
					</view>
				</uni-col>
				<uni-col :span="20">
					<uni-col :span="12">
						<text style="margin: 0.3rem 0 0 0.3rem">王勇</text>
						<uni-rate :value="3" :size="16" color="#bbb" active-color="#fd911e" max="3" style="display:inline-block;" />
					</uni-col>
					<uni-col :span="12" style="text-align: right;">
						<text style="font-size:.8rem; color: #5a5959;">服务次数4223</text>
					</uni-col>
					<uni-col>
						<text class="iconfont iconlingdang dist-text">服务简称</text>
						<text class="iconfont iconlingdang dist-text">服务简称</text>
						<text class="iconfont iconlingdang dist-text">服务简称</text>
						<text class="iconfont iconlingdang dist-text">服务简称</text>
					</uni-col>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row location">
				<view @click="getLocation">
					<uni-row>
						<text style="font-size:.8rem; line-height: 1.5; color: #5a5959;">和平区令闻街200号新生活化妆品公司</text>
					</uni-row>
					<uni-row>
						<text style="font-size:.8rem; line-height: 1.5; color: #5a5959;">1.4公里</text>
					</uni-row>
				</view>
			</uni-row>
		</uni-card>
		<uni-card class="bind-card">
			<uni-row class="demo-uni-row" :gutter="8" style="margin-top: 20rpx; padding-bottom: 20rpx;">
				<uni-col style="margin-top: 16rpx;" v-for="item in 3">
					<view @click="toServiceInfo">
						<uni-col :span="4">
							<image style="height: 88rpx;" src="https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132" mode="aspectFill"></image>
						</uni-col>
						<uni-col :span="15">
							<uni-col style="margin: 5rpx 0;">
								<text style="font-size:.8rem; color: #5a5959;" class="clamp">雪非雪青果维雪青果维雪青果维雪青果维雪青果维雪青果维蔬嫩肤护理服务</text>
							</uni-col>
							<uni-col style="margin: 5rpx 0;">
								<text style="font-size:.8rem; color: #5a5959;">护理时长：50分钟</text>
							</uni-col>
						</uni-col>
						<uni-col :span="5">
							<text style="font-size:1.2rem; color: #E37078; line-height: 96rpx;">￥107</text>
						</uni-col>
					</view>
				</uni-col>
			</uni-row>
		</uni-card>
		<uni-card title="顾客评价" class="bind-card">
			<uni-row class="demo-uni-row" :gutter="8" style="margin-top: 20rpx; padding-bottom: 20rpx;" v-for="item in 3">
				<uni-col :span="4">
					<view>
						<image style="height: 110.32rpx;border-radius: 100%;" src="https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132" mode="aspectFill"></image>
					</view>
				</uni-col>
				<uni-col :span="20">
					<uni-col :span="18">
						<text style="margin: 0.3rem 0.5rem 0 0.3rem">王勇</text>
						<uni-tag text="置顶" size="small" icon="iconshouyehome" type="warning" style="margin-right: 0.5rem; margin-bottom: 0.3rem;"></uni-tag>
						<uni-tag text="加精" size="small" icon="iconshouyehome" type="error" style="margin-right: 0.5rem; margin-bottom: 0.3rem;"></uni-tag>
					</uni-col>
					<uni-col :span="6" style="text-align: right;">
						<text style="font-size:.8rem; color: #5a5959;">2021.01.01</text>
					</uni-col>
					<uni-col>
						<uni-rate :value="3" :size="16" color="#bbb" active-color="#fd911e" max="3" style="display:inline-block;" />
						<text style="margin-left: 20rpx; font-size:.8rem; color: #FFB800; vertical-align: middle;">4.2星</text>
					</uni-col>
				</uni-col>
				<uni-col>
					<uni-tag text="皇冠店铺" size="small" inverted="true" circle="true" icon="iconshouyehome" type="error" style="margin-right: 0.5rem; margin-bottom: 0.3rem;"></uni-tag>
					<uni-tag text="皇冠" size="small" inverted="true" circle="true" icon="iconshouyehome" type="error" style="margin-right: 0.5rem; margin-bottom: 0.3rem;"></uni-tag>
					<uni-tag text="皇冠" size="small" inverted="true" circle="true" icon="iconshouyehome" type="error" style="margin-right: 0.5rem; margin-bottom: 0.3rem;"></uni-tag>
					<uni-tag text="服务" size="small" inverted="true" circle="true" icon="iconshouyehome" type="error" style="margin-right: 0.2rem; margin-bottom: 0.3rem;"></uni-tag>
				</uni-col>
				<uni-col>
					<text style="font-size:.8rem; color: #595959;">详细评价内容！！！详细评价内容！！！详细评价内容！！！详细评价内容！！！详细评价内容！！！</text>
				</uni-col>
			</uni-row>
		</uni-card>
		<!-- <view class="bind-card tui-operation">
			<tui-button :size="28" type="danger" width="220rpx" height="70rpx" shape="circle" style="margin-right: 1rem;margin-left: auto;"
			 @tap="toOrder()">确认下单</tui-button>
		</view> -->
	</view>
</template>

<script>
	import tuiButton from "@/components/button/button"
	export default {
		components:{
			tuiButton
		},
		data() {
			return {
			}
		},
		methods: {
			getLocation() {
				uni.getLocation({
				    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				    success: function (res) {
				        // const latitude = res.latitude;
				        // const longitude = res.longitude;
						const latitude = 39.909; // 默认定在首都;
						const longitude = 116.39742;
				        uni.openLocation({
				            latitude: latitude,
				            longitude: longitude,
				            success: function () {
				                console.log('success');
				            }
				        });
				    }
				});
			},
			toOrder() {
				uni.navigateTo({
					url:'/packageG/pages/order/order'
				})
			},
			toServiceInfo(){
				uni.navigateTo({
					url:'/packageG/pages/serviceInfo/serviceInfo'
				})
			}
		}
	}
</script>

<style>
	.container{
		padding-bottom: 100rpx;
	}
	.bind-card{
		margin: 0;
	}
	.bind-card:nth-child(n+2){
		margin-top: 24rpx;
	}
	image{
		width: 100%;
	}
	.location{
		display: block;
		position: relative;
		padding: 0 2rem 0 1rem;
	}
	.location::before{
		content: ' ';
		display: block;
		width: .5rem;
		height: .5rem;
		border-radius: 100%;
		background: #E94732;
		position: absolute;
		top: 50%;
		margin-top: -.25rem;
		left: 0;
	}
	.location::after{
		content: '\e672';
		display: block;
		position: absolute;
		right: 0;
		font-size: 1.5rem;
		font-family: "iconfont" !important;
		top:50%;
		margin-top: -.75rem;
		color: #E94732;
	}
	.clamp {
		/* #ifdef APP-PLUS-NVUE */
		lines: 1;
		/* #endif */
		/* #ifndef APP-PLUS-NVUE */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		/* #endif */
	}
	.tui-operation {
		width: 100%;
		height: 100rpx;
		/* box-sizing: border-box; */
		background: rgba(255, 255, 255, 0.98);
		position: fixed;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		z-index: 10;
		bottom: 0;
		left: 0;
	}
	.dist-text{
		font-size: 24rpx;
		color: #F4B406;
		margin-right: 16rpx;
	}
</style>
